<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置网页标题 -->
    <title>训练指导</title>
</head>
<body>
    <h1>视频训练指导</h1>
    <!-- 创建uploadForm表单，收集用户信息 -->
    <form id="uploadForm">
        <!-- 收集video文件 -->
        <label for="videoInput">选择视频:</label>
        <input type="file" style="color: brown;" id="videoInput" name="video" accept="video/*" 
required><br><br>
    <div class="preview-container">
        <h2>视频预览</h2>
        <video style="width: 350px; height: 200px;" id="videoPreview" class="preview-video" controls></video>
        <div id="videoInfo" class="file-info"></div>
    </div>
        <!-- 设置下拉选择菜单，收集人物位置 -->
        <label for="sideInput">选择人物位置:</label>
        <select id="sideInput" name="side">
            <option value="0">单人视频</option>
            <option value="1">左边人物</option>
            <option value="2">右边人物</option>
        </select><br><br>
        <!-- 设置数字输入，收集用户身高 -->
        <label for="heightInput">输入身高 (cm):</label>
        <input type="number" id="heightInput" name="height" 
value="170" required><br><br>
        <!-- 创建*上传视频*按钮，点击后运行uploadVideo函数 -->
        <button type="button" style="background-color: black; color: aliceblue; width: 100px; height: 40px;" onclick="uploadVideo()">上传视频</button>
    </form>  <!-- 结束表单 -->

    <div class="results-container">
        <h2>分析结果</h2>
        <div class="summary">
            <div class="stat-box">
                <h3>总攻击次数</h3>
                <div id="totalAttacks">0</div>
            </div>
        </div>
        
        <div class="attacks-list">
            <h3>详细攻击数据</h3>
            <div id="attacksList"></div>
        </div>
    </div>
    <script>
        // 视频预览
        document.getElementById('videoInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const preview = document.getElementById('videoPreview');
                const info = document.getElementById('videoInfo');
                
                preview.src = URL.createObjectURL(file);
                preview.style.display = 'block';
                info.textContent = `文件名: ${file.name}\n大小: ${(file.size / 1024 / 1024).toFixed(2)} MB`;

                // 当视频不再使用时，释放内存
                preview.onloadeddata = function() {
                    URL.revokeObjectURL(preview.src);
                }
            }
        });

        function uploadVideo() {
            // 检查视频文件，如果为空，提示
            // console.log('这是一条打印到控制台的消息。');
            var videoInput = document.getElementById('videoInput');
            if (videoInput.value === '') {
                alert('请先选择一个视频文件');
                return;
            }
            // 创建新的formData对象将uploadForm表单封装起来
            var formData = new 
FormData(document.getElementById('uploadForm'));
            // 使用fetch API 发送POST请求到服务器的 /invideo 路径，携带formData作为请求体。
            fetch('/invideo', {
                method: 'POST',
                body: formData,
            })
            // 将响应体解析为 JSON。
            .then(response => {
                if (response.ok) {
                    return response.json();
                }
                throw new Error('Network response was not ok.');
            })
            .then(data => {
                alert('运行已经完成。');
                // return;
            })
            // 出现错误时，显示在控制台
            .catch(error => {
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html>